<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-09-07 15:26:22
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-09-26 09:53:23
 * @Description: 我的收藏
 * @FilePath: \tuanfeng-mini\src\pages\collection.vue
-->
<template>
    <div class="container">
        <template v-if="!loading && list.length">
            <div class="item" v-for="(item, index) in list">
                <div class="left" @click="toDetail(item)">
                    <div class="type">最新动态</div>
                    <div class="name">{{item.name}}</div>
                </div>
                <div class="right">
                    <div class="star" @click="unstar(item, index)">
                        <u-icon name="star-fill" class="active" :size="40"></u-icon>
                    </div>
                </div>
            </div>
        </template>
        <Empty v-if="!loading && !list.length"></Empty>
    </div>
</template>
<script>
import Empty from "../components/Empty.vue";
import { mapState, mapMutations, mapActions } from "vuex";
import { getCollectionAPI, cancelCollectAPI } from "../api/collection";

export default {
    components: { Empty },
    data() {
        return {
            loading: false,
            list: [],
        };
    },
    computed: {
        ...mapState(["openId"]),
    },
    onShareAppMessage(){},
    onShow() {
        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getCollectionAPI({ openId: this.openId, type: 1 }).then((res) => {
            this.list = res.data;
            wx.hideLoading();
            this.loading = false;
        });
    },
    methods: {
        unstar(item, index) {
            wx.showModal({
                title: "确定取消收藏吗?",
                content: `确定从我的收藏移除该${item.type === 1 ? '窗口' : '文章'}吗?`,
                success: (res) => {
                    if (res.confirm) {
                        // 取消收藏
                        cancelCollectAPI({
                            openId: this.openId,
                            pid: item.pid,
                            type: item.type,
                        }).then((res) => {
                            this.list.splice(index, 1);
                        });
                    }
                },
            });
        },
        toDetail(item) {
            this.$u.route({
                url: "pages/dept_detail",
                params: {
                    id: item.pid,
                    title: item.name,
                },
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    min-height: 100vh;
    background-color: #fafafa;
    box-sizing: border-box;
    padding: 15px;
    .item {
        padding: 15px 10px 15px 15px;
        display: flex;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .left {
            flex: auto;
            .type {
                font-size: 15px;
                color: $color_secondary-text;
                margin-bottom: 5px;
            }
            .name {
                font-size: 16px;
                line-height: 24px;
                font-weight: bold;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
        .right {
            width: 50px;
            flex: none;
            margin-left: 10px;
            .star {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .active {
                    color: #0c92ff;
                }
            }
        }
    }
}
</style>
